<template>
  <div class="print-view">
    <div class="hiprint-printTemplate"></div>
    <div id="PrintElementOptionSetting" class="PrintElementOptionSetting"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, computed, defineProps } from "vue";
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
import { useRoute } from "vue-router";
import panelFunc from "../panel.js";

const hiprintTemplate = ref();
const route = useRoute();
const props = defineProps({
  ids: { type: Array, default: () => [] },
  labelCodes: { type: Array, default: () => [] },
  type: { type: [String, Number], default: "" },
  batchno: { type: [String, Number], default: "" },
});

const templates = computed(() => {
  if (route.query?.labelCodes) {
    return route.query?.labelCodes ? JSON.parse(route.query?.labelCodes) : [];
  }
  if (props.labelCodes?.length) {
    return props.labelCodes;
  }
  return [];
});

// const activeStep = ref(0);
// // 当前纸张
// const curPaper = ref({
//   type: "A4",
//   width: 210,
//   height: 296.6,
// });

// 纸张类型
// const paperTypes = ref([
//   {
//     type: "A3",
//     width: 420,
//     height: 296.6,
//   },
//   {
//     type: "A4",
//     width: 210,
//     height: 296.6,
//   },
//   {
//     type: "A5",
//     width: 210,
//     height: 147.6,
//   },
//   {
//     type: "B3",
//     width: 500,
//     height: 352.6,
//   },
//   {
//     type: "B4",
//     width: 250,
//     height: 352.6,
//   },
//   {
//     type: "B5",
//     width: 250,
//     height: 175.6,
//   },
// ]);

const buildDesigner = (panel) => {
  // 初始化可拖拽的元素
  hiprint.init({
    providers: [new defaultElementTypeProvider()],
  });
  hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));

  hiprintTemplate.value = new hiprint.PrintTemplate({
    template: panel, // 模板json
    // pageBreak: true,
    settingContainer: "#PrintElementOptionSetting", // 元素参数容器
    paginationContainer: ".hiprint-printPagination", // 多面板的容器， 实现多面板， 需要在添加一个 <div class="hiprint-printPagination"/>
  });
  // // 设计器的容器
  hiprintTemplate.value.design(".hiprint-printTemplate", {
    grid: true,
  });
};

async function print() {
  const options = { leftOffset: -1, topOffset: -1 };
  const printData = [];
  // 打印数据，key 对应 元素的 字段名
  // 参数: 打印时设置 左偏移量，上偏移量
  templates.value.forEach((ele, idx) => {
    printData.push({
      qrcodeData: String(import.meta.env.VITE_APP_H5_CODE_API + ele),
      qrcodeText: String(ele),
      // count: String(idx + 1),
    });
  });
  hiprintTemplate.value.print(printData, options);

  return true;
}

defineExpose({
  print,
});

onMounted(() => {
  setTimeout(() => {
    const panel = panelFunc(templates.value[0]);
    buildDesigner(panel);
  }, 500);
});
</script>
<style lang="scss" scoped>
.print-wrap {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  overflow: hidden;
}
:deep(.el-card__header) {
  padding-top: 10px;
  padding-bottom: 10px;
}
.print-btns {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
}
:deep(.el-card__body) {
  overflow-y: auto;
}
.print-view {
  display: flex;
  padding: 20px;
  justify-content: center;
  background-color: #ffffff;
  flex: 1;
  overflow-y: auto;
}
.hiprint-printTemplate {
  margin-right: 20px;
}
.PrintElementOptionSetting {
  max-width: 300px;
  flex-shrink: 0;
}
</style>
